<script setup>
import { ref } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElButton, ElDialog, ElDivider, ElIcon, ElMessage, ElUpload } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useCommonStore } from '../../stores/index';
import ChangeMobilePhone from './ChangeMobilePhone.vue';
import ChangePassword from './ChangePassword.vue';

const storeCommon = useCommonStore();
const { activePersonalShow } = storeToRefs(storeCommon);

const avatarImg = ref(
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fdff2ab10-cc27-4591-a24a-4d48ed6769b8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706337124&t=7f530ac75a78d4a637c18c3754221556',
);
const uploadFile = ref([]);
const phoneShow = ref(false);
const passShow = ref(false);

const closeBoxShowDialog = () => {
  storeCommon.SET_ACTIVE_PERSONAL_SHOW(false);
};

const handleAvatarSuccess = (uploadFile, uploadFiles) => {
  uploadFile.value = uploadFiles;
};

const handleRequestPic = () => {
  const prom = new Promise(() => {});

  prom.abort = () => {};

  return prom;
};

const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/bmp';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage({
      message: `上传头像图片只能是 .png, .bmp,.jpg, .jpeg格式!`,
      type: 'warning',
    });

    return isJPG;
  }

  if (!isLt2M) {
    ElMessage({
      message: `上传头像图片大小不能超过 2MB!`,
      type: 'warning',
    });

    return isLt2M;
  }

  // putModifyAvatarApi(file);
};

const handleChange = (type) => {
  if (type == 'phone') {
    phoneShow.value = true;
  } else {
    passShow.value = true;
  }

  storeCommon.SET_ACTIVE_PERSONAL_SHOW(false);
};

const handleOpenChangeShow = (type) => {
  if (type == 'phone') {
    phoneShow.value = false;
  } else {
    passShow.value = false;
  }
};

/*
 *@description: 修改头像
 */
//  const putModifyAvatarApi = async (uploadFile) => {
//   const [err] = await editAvatar({
//     file: uploadFile,
//     id: userInfo.value.id,
//   });

//   if (!err) {
//     const [userErr, userInfoVal] = await getPersonalInformation();

//     if (!userErr) {
//       $userStore.SET_USER_INFO(userInfoVal.data);
//       avatarImg.value = userInfoVal.data.avatar;
//     }
//   }
// };
</script>
<template>
  <div class="personal_root">
    <ElDialog
      v-if="activePersonalShow"
      v-model="activePersonalShow"
      :append-to-body="false"
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      :align-center="true"
    >
      <template #header>
        <div class="my-header">
          <div class="dialog-title">个人信息</div>
          <div class="dialog-close" @click="closeBoxShowDialog()">
            <ElIcon color="#333333">
              <CloseBold />
            </ElIcon>
          </div>
        </div>
      </template>

      <main>
        <div class="avatar_box">
          <ElUpload
            class="avatar-uploader"
            :multiple="false"
            :file-list="uploadFile"
            :show-file-list="false"
            :on-change="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :http-request="handleRequestPic"
            accept=".png,.bmp,.jpg,.jpeg"
          >
            <div class="avatar">
              <img v-if="avatarImg" :src="avatarImg" />
            </div>
            <ElButton type="primary" link>修改头像</ElButton>
          </ElUpload>
        </div>
        <ElDivider content-position="left">人员信息</ElDivider>
        <div class="user_content">
          <div class="user_item">
            <p>姓名</p>
            <p>张德军</p>
          </div>
          <div class="user_item">
            <p>性别</p>
            <p>男</p>
          </div>
          <div class="user_item">
            <p>年龄</p>
            <p>46</p>
          </div>
          <div class="item_">
            <div class="user_item">
              <p>联系方式</p>
              <p>15877480101</p>
            </div>
            <p @click="handleChange('phone')">更换手机号</p>
          </div>
          <div class="item_">
            <div class="user_item">
              <p>登录密码</p>
              <p>******</p>
            </div>
            <p @click="handleChange('pass')">修改密码</p>
          </div>
          <div class="user_item">
            <p>政治面貌</p>
            <p>群众</p>
          </div>
          <div class="user_item">
            <p>部门</p>
            <p>庆阳市林科院</p>
          </div>
          <div class="user_item">
            <p>角色</p>
            <p>主管理员</p>
          </div>
        </div>
      </main>
    </ElDialog>
  </div>

  <!-- 修改手机号 -->
  <ChangeMobilePhone :phone-show="phoneShow" @handle-open-change-show="handleOpenChangeShow" />
  <!-- 修改密码 -->
  <ChangePassword :pass-show="passShow" @handle-open-change-show="handleOpenChangeShow" />
</template>

<style scoped lang="scss">
.personal_root {
  :deep(.el-dialog) {
    width: 770px;
    height: 670px;
    border-radius: 10px;
  }

  :deep(.el-dialog__header) {
    padding: 0 !important;
  }

  .my-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding-left: 32px;
    border-bottom: 1px solid #f8f8f8;

    .dialog-title {
      color: #333333;
      font-size: 18px;
      font-family: Source Han Sans CN;
    }

    .dialog-close {
      cursor: pointer;
    }
  }

  main {
    .avatar_box {
      text-align: center;
      :deep(.el-upload) {
        display: flex;
        flex-direction: column;
      }
      .avatar {
        display: block;
        width: 100px;
        height: 100px;
        margin: 0 auto 5px auto;
        // overflow: hidden;
        background-color: coral;
        border-radius: 50px;

        img {
          // --s: 200px; /* image size */
          --b: 6px; /* border thickness */
          --c: var(--el-color-danger); /* border color */
          --cb: #e9ecef; /* background color */
          --f: 1; /* initial scale */

          box-sizing: content-box;
          width: 100%;
          height: 100%;
          padding-top: calc(var(--s) / 5);
          background: radial-gradient(
              circle closest-side,
              var(--cb) calc(99% - var(--b)),
              var(--c) calc(100% - var(--b)) 99%,
              #0000
            )
            var(--_g);
          border-radius: 50px;

          outline: var(--b) solid var(--c);
          outline-offset: var(--_o);
          transform: scale(var(--f));
          cursor: pointer;
          transition: 0.5s;
          aspect-ratio: 1;
          -webkit-mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) /
              calc(100% / var(--f) - 2 * var(--b) - 2px) 50%,
            radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
          --_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box;
          --_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));
        }
        img:hover {
          --f: 1.2; /* hover scale */
        }
      }
      :deep(.el-button > span) {
        color: #00ad93;
        font-size: 18px;
        font-family: Source Han Sans CN;
        line-height: 38px;
      }
    }
    :deep(.el-divider__text) {
      color: #333333;
      font-size: 18px;
      font-family: Source Han Sans CN;
    }
    .user_content {
      p {
        margin-bottom: 25px;
      }
      .user_item {
        display: flex;
        align-items: center;
        p {
          margin-right: 29px;
          font-size: 18px;
          font-family: Source Han Sans CN;
          &:first-child {
            width: 220px;
            color: #999999;
            text-align: right;
          }
          &:nth-child(2) {
            color: #333333;
          }
        }
      }
      .item_ {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #00ad93;
        font-size: 18px;
        font-family: Source Han Sans CN;
        cursor: pointer;
      }
    }
  }
}
</style>
